// 实现这个项目的构建任

const { src, dest, series, parallel, watch } = require("gulp");
const del = require("del");
const plugins = require("gulp-load-plugins")();
const bs = require("browser-sync").create();

const PUBLIC = "public";
const SOURCE = "src";
const DIST = "dist"; // 生产发布目录
const TEMP = "temp"; // 编译过程中的临时目录

const defaultConfig = {
  menus: [
    {
      name: "Home",
      icon: "aperture",
      link: "index.html",
    },
    {
      name: "Features",
      link: "features.html",
    },
    {
      name: "About",
      link: "about.html",
    },
    {
      name: "Contact",
      link: "#",
      children: [
        {
          name: "Twitter",
          link: "https://twitter.com/w_zce",
        },
        {
          name: "About",
          link: "https://weibo.com/zceme",
        },
        {
          name: "divider",
        },
        {
          name: "About",
          link: "https://github.com/zce",
        },
      ],
    },
  ],
  pkg: require("./package.json"),
  date: new Date(),
};

// 清空历史编译文件
const clean = () => {
  return del([TEMP, DIST]);
};

// 公共文件
const copyPublic = () => src(`${PUBLIC}/**`, { base: PUBLIC }).pipe(dest(DIST));

// 字体文件
const buildFont = () => {
  return src("src/assets/fonts/**", { base: SOURCE })
    .pipe(plugins.imagemin())
    .pipe(dest(DIST));
};

// 编译压缩图片文件
const buildImage = () => {
  return src(`${SOURCE}/assets/images/**`, { base: SOURCE })
    .pipe(plugins.imagemin())
    .pipe(dest(DIST));
};

// 编译模版文件
const buildHtml = () => {
  return src(`${SOURCE}/**/*.html`, { base: SOURCE })
    .pipe(plugins.swig({ data: defaultConfig, defaults: { cache: false } }))
    .pipe(dest(TEMP))
    .pipe(bs.reload({ stream: true }));
};

// 编译压缩样式
// 注意: gulp-sass 插件默认会将_开头的样式文件合并为一个文件
const buildStyle = () => {
  return src(`${SOURCE}/**/*.scss`, { base: SOURCE })
    .pipe(plugins.sass().on("error", plugins.sass.logError))
    .pipe(dest(TEMP))
    .pipe(bs.reload({ stream: true }));
};

// 编译压缩脚本
const buildScripts = () => {
  return src(`${SOURCE}/**/*.js`, { base: SOURCE })
    .pipe(plugins.babel({ presets: ["@babel/preset-env"] }))
    .pipe(dest(TEMP))
    .pipe(bs.reload({ stream: true }));
};

// 处理html中的文件索引，代码压缩等
const useref = () => {
  return src(`${TEMP}/*.html`, { base: "temp" })
    .pipe(plugins.useref({ searchPath: [TEMP, "."] }))
    .pipe(plugins.if(/\.js$/, plugins.uglify()))
    .pipe(plugins.if(/\.css$/, plugins.cleanCss()))
    .pipe(
      plugins.if(
        /\.html$/,
        plugins.htmlmin({
          collapseWhitespace: true,
          minifyCSS: true,
          minifyJS: true,
        })
      )
    )
    .pipe(dest(DIST));
};

// 本地起的server测试服务
const serve = () => {
  watch(`${SOURCE}/**/*.js`, buildScripts);
  watch(`${SOURCE}/**/*.scss`, buildStyle);
  watch(`${SOURCE}/**/*.html`, buildHtml);

  watch(
    ["src/assets/images/**", "src/assets/fonts/**", "public/**"],
    bs.reload
  );

  bs.init({
    notify: false,
    port: 2080,
    host: "0,0,0,0",
    server: {
      baseDir: [TEMP, SOURCE, PUBLIC],
      routes: {
        "/node_modules": "node_modules",
      },
    },
  });
};

const compile = parallel([buildStyle, buildHtml, buildScripts]);

// 生产上线打包
const build = series(
  clean,
  parallel(series(compile, useref), buildImage, buildFont, copyPublic)
);

// 开发测试
const develop = series(compile, serve);

module.exports = {
  clean,
  build,
  develop,
};
